
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>海贼王主题网站</title>
    <link rel="shortcut icon" href="http://www.ylcp.shop/files/files/1649600488898/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/loading.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>


    <div class="main">
        <header>
            <nav>
                <a class="logo" href="#">One Piece</a>
                <ul class="nav">
                    <li><a href="">恶魔果实</a></li>
                    <li><a href="1.html">强者世界</a></li>
                    <li><a href="2.html">明暗大战</a></li>
                    <li><a href="3.html">成员介绍</a></li>
                    <li><a href="4.html">经典战役</a></li>
                    <li><a href="5.html">联系我们</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <section id="fruit">
                <h2>恶魔果实</h2>
                <ul class="fruit-box">
                    <li>
                        <img src="picture/16.jpg" alt="泡泡果实">
                        <h3>泡泡果实</h3>
                        <h5>卡莉法 </h5>
                    </li>
                    <li>
                        <img src="picture/21.jpg" alt="烧烧果实">
                        <h3>烧烧果实</h3>
                        <h5>艾斯/萨博</h5>
                    </li>
                    <li>
                        <img src="picture/31.jpg" alt="暗暗果实">
                        <h3>暗暗果实</h3>
                        <h5>黑胡子</h5>
                    </li>
                    <li>
                        <img src="picture/41.jpg" alt="手术果实">
                        <h3>手术果实</h3>
                        <h5>特拉法尔加·罗</h5>
                    </li>
                    <li>
                        <img src="picture/51.jpg" alt="牛牛果实">
                        <h3>牛牛果实-长颈鹿形态</h3>
                        <h5>卡库 </h5>
                    </li>
                    <li>
                        <img src="picture/61.jpg" alt="线线果实">
                        <h3>线线果实</h3>
                        <h5>多弗朗明哥</h5>
                    </li>
                    <li>
                        <img src="picture/7.jpg" alt="橡胶果实">
                        <h3>橡胶果实</h3>
                        <h5>路飞</h5>
                    </li>
                    <li>
                        <img src="picture/8.jpg" alt="四分五裂果实">
                        <h3>四分五裂果实</h3>
                        <h5>小丑巴基</h5>
                    </li>
                </ul>
            </section>

        </main>

    </div>

</body>

</html>

